<template>
<!-- 为Echars准备一个具备宽高的DOM -->
  <div ref="main" id="main" style="width:600px;height:400px;" class="dashboard-container">
     
  </div>
</template>

<script>
// 导入echarts
import echarts from 'echarts'
export default {
  mounted(){
    this.showMain()
  },
  methods:{
    showMain(){
      // 基于准备好的dom，初始化echarts图表
        var myChart = echarts.init(document.getElementById('main')); 
        var myChart = echarts.init(this.$refs.main); 
        var option = {
            title:{  //标题
              text:"Echarts 入门实例"
            },
            tooltip: { //提示内容
                show: true
            },
            legend: { //图例组件，点击后会显示或隐藏柱状
                data:['销量']
            },
            xAxis : [ //X轴配置
                {
                    type : 'category',
                    data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
                }
            ],
            yAxis : [
                {
                    type : 'value'
                }
            ],
            series : [ //序列
                {
                    "name":"销量", //用于提示框中显示的内容
                    "type":"bar", //指定使用那个类型图表
                    "data":[5, 20, 40, 10, 10, 20]
                }
            ]
        };

        // 为echarts对象加载数据 
        myChart.setOption(option);    
    }
  }
}

</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
